<template>
  <div class="vehicle-list">
    <div
      v-for="(item ,index) in vehiclesList"
      :key="index"
      class="list-item"
      :class="{
        'list-item--active': item.id === currentVehicle?.id
      }"
      @click="handleSelect(item)"
    >
      <div class="list-item__header flex">
        <div class="title">{{ item.licenseNumber }}</div>
        <div class="status flex">
          <div>车辆状态：</div>
          <el-tag type="primary" size="mini">
            {{ item.carStatus }}
          </el-tag>
        </div>
      </div>

      <div class="list-item__content">
        <div class="info-row">车辆类型：{{ item.carType }}</div>
        <div class="info-row">定位位置：{{ item.address ?? '-' }}</div>
        <div class="info-row">最后定位时间：{{ item.lastLocationTime }}</div>
        <div class="info-row">车辆核载：{{ item.loadCapacity }}人</div>
      </div>
    </div>
  </div>
</template>
<script>
import vehicleGpsMixin from '@/views/vehicleService/js/vehicleGpsMixin'

export default {
  name: 'VehicleList',
  mixins: [vehicleGpsMixin],
  props: {
    vehicles: {
      type: Array,
      default: () => []
    },

    currentVehicleId: {
      type: Number,
      default: 0
    },

    beforeChoice: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      currentVehicle: null
    }
  },
  computed: {
    vehiclesList() {
      return this.vehicles.map(item => {
        return {
          id: item?.id,
          licenseNumber: this.licenseNumberFormat(item?.license_plate_number),
          carStatus: this.getStatus(item?.lastGps?.status),
          address: item?.address,
          lastLocationTime: item?.lastGps?.lastLocationTime,
          carType: item?.type?.name,
          loadCapacity: item?.load_capacity,
          imei: item?.imei
        }
      })
    }
  },
  watch: {
    currentVehicleId: {
      handler(val) {
        this.currentVehicle = this.vehiclesList.find(item => item.id === val)
      },
      immediate: true
    }
  },
  methods: {
    handleSelect(e) {
      let flag = true
      if (typeof this.beforeChoice === 'function') {
        flag = this.beforeChoice(e)
      }

      if (!flag) return

      this.currentVehicle = e
      this.$emit('choice', this.findTarget(e.id))
    },

    findTarget(id) {
      return this.vehicles.find(item => item.id === id)
    }
  }
}
</script>
<style lang="scss" scoped>
.vehicle-list {
  .list-item {
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    background-color: #fff;
    border: 1px solid #fff;
    transition: all .3s;

    &--active {
      border: 1px solid #409EFF;
    }

    &:last-child {
      margin-bottom: 0;
    }

    &__header {
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      padding-bottom: 10px;
      border-bottom: 1px solid #F5F5F5;

      .title {
        font-weight: bold;
      }

      .status {
        align-items: center;
        min-width: 140px;
      }
    }

    &__content {
      margin-top: 10px;
      font-size: 14px;
      color: #909399;

      .info-row {
        margin-bottom: 10px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
